<template>
    <div>
        <NavBar title="我的预约" />
        <van-empty v-if="list.length === 0" description="暂无预约数据"></van-empty>
        <div class="card" v-for="item in list" :key="item.id">
            <template v-if="role_id == 2">
                <div>医生姓名:{{ item.doctor }}</div>
                <div>医生电话:{{ item.doctorPhone }}</div>
            </template>
            <template v-if="role_id == 1">
                <div>患者姓名:{{ item.name }}</div>
                <div>患者电话:{{ item.phone }}</div>
            </template>
            <div>预约状态:
                <van-tag v-if="item.status === 1" type="primary" round>
                    {{ appointStatus(item.status) }}
                </van-tag>
                <van-tag v-else-if="item.status === 2" type="danger" round>
                    {{ appointStatus(item.status) }}
                </van-tag>
                <van-tag v-else-if="item.status === -1" type="default" round>
                    {{ appointStatus(item.status) }}
                </van-tag>
            </div>
            <div>预约时间:{{ dateFmt(item.appoint_time as string) }}</div>
            <van-row>
                <van-col span="10" offset="14">
                    <van-space>
                        <van-button @click="editAppoint(item.id as number)" v-if="item.status === 1" size="small" plain
                            type="primary" round>修改预约时间</van-button>
                        <van-button @click="cancelAppoint(item.id)" v-if="item.status === 1" size="small" plain
                            type="danger" round>取消预约</van-button>
                    </van-space>
                </van-col>
            </van-row>
            <van-divider></van-divider>
        </div>
        <!-- 弹出层 -->
        <van-popup position="bottom" v-model:show="show" :style="{ padding: '20px' }">
            <h3>修改预约时间</h3>
            <van-divider></van-divider>
            <van-form @submit="onSubmit">
                <van-field name="date" v-model="date" label="日期" type="date"></van-field>
                <van-field name="time" v-model="time" label="时间" type="time"></van-field>
                <van-button native-type="submit" block plain type="primary" round>确认提交</van-button>
            </van-form>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import { AppointmentType, NSU } from '@/types';
import { getAppointlist, appointmentUpdate } from '@/utils/api';
import { appointStatus, dateFmt } from '@/utils/util';
import { showToast, showConfirmDialog } from 'vant';
import { onMounted, ref } from 'vue';
const { id, role_id } = JSON.parse(localStorage.getItem('userLoginInfo') || '{}');
const list = ref<AppointmentType[]>([]);

onMounted(async () => {
    const params: { doctorid?: NSU, patientid?: NSU } = {}
    if (role_id == 1) {
        params.doctorid = id;
    } else {
        params.patientid = id;
    }
    const { data: { data } } = await getAppointlist(params);
    list.value = data;
});
// 取消预约
const cancelAppoint = (id: number | undefined) => {
    showConfirmDialog({
        title: '提示',
        message:
            '确认取消预约?',
    })
        .then(async () => {
            const { data } = await appointmentUpdate({ id, status: -1 });
            showToast(data.msg)
            if (data.code === 200) {
                const index = list.value.findIndex(item => item.id === id);
                list.value[index].status = -1;
            }
        })
        .catch(() => null);

}
// 控制弹窗的显示状态
const show = ref(false);
// 预约id
const appoinId = ref(0);
const date = ref('');
const time = ref('');

// 显示编辑弹窗
const editAppoint = (id: number) => {
    show.value = true;
    appoinId.value = id;
    const index = list.value.findIndex(item => item.id === id);
    if (index > -1) {
        const datetime = dateFmt(list.value[index].appoint_time as string, '-');
        const [ymd, his] = datetime.split(' ');
        date.value = ymd;
        time.value = his;
    }

}
const onSubmit = async (values: { date: string, time: string }) => {
    const { date, time } = values;
    const datetime = date + ' ' + time;
    const { data } = await appointmentUpdate({ id: appoinId.value, appoint_time: datetime });
    showToast(data.msg)
    if (data.code == 200) {
        const index = list.value.findIndex(item => item.id === appoinId.value);
        list.value[index].appoint_time = new Date(datetime).getTime();
        show.value = false;
    }
}

</script>
<style lang="scss">
.card {
    padding: 10px;
    margin: 10px;

    >div {
        line-height: 26px;
    }
}
</style>